<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">柱形图-就业行业</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="chartsdom" id="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "example",
  data() {
    return {
      option: {
        color: ["#2f89cf"],
        // 提示框组件
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        // 修改图表位置大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        // x轴相关配置
        xAxis: [
          {
            type: "category",
            data: [
              "旅游行业",
              "教育培训",
              "游戏行业",
              "医疗行业",
              "电商行业",
              "社交行业",
              "金融行业",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.8)",
              fontSize: 10,
            },
            // x轴样式不显示
            axisLine: {
              show: false,
            },
          },
        ],
        // y轴相关配置
        yAxis: [
          {
            type: "value",
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.6)",
              fontSize: 12,
            },
            // y轴样式修改
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.6)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
          },
        ],
        // 系列列表配置
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "35%",
            // ajax传动态数据
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.getChart();
  },

  methods: {
    getChart() {
      let myChart = echarts.init(document.getElementById("chart"));
      myChart.setOption(this.option, true);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sn-container {
    left: 1436px;
  top: 2837px;
  width: 432px;
  height: 400px;
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}


</style>
